<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles/common.css" media="screen" />

    <link rel="stylesheet" type="text/css" media="screen, projection" href="styles/timeline.css"/>
    <link rel="stylesheet" type="text/css" href="styles/pepper-grinder/jquery-ui-1.8.5.custom.css"  />
    <link rel="stylesheet" type="text/css" href="skin/jplayer.blue.tuesday.css"  />
    <style type="text/css">

    </style>

    <script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.5.custom.min.js."></script>
    <script type="text/javascript" src="scripts/underscore-min.js"></script>
    <script type="text/javascript" src="scripts/wikid-0.2.js"></script>
    <script type="text/javascript" src="scripts/couch.js"></script>
    <script type="text/javascript" src="scripts/futon.format.js"></script>
    <script type="text/javascript" src="scripts/jquery.couch.js"></script>
    <script type="text/javascript" src="scripts/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="scripts/date.js" ></script>
    <script type="text/javascript" src="scripts/timeline.js" ></script>
    <script type="text/javascript" src="scripts/shortcuts.js"></script>
    <script type="text/javascript" src="scripts/tag-it.js"></script>
    <script>
        Timeline_ajax_url = "scripts/timeline_2.3.1/timeline_ajax/simile-ajax-api.js";
        Timeline_urlPrefix = 'scripts/timeline_2.3.1/timeline_js/';
        Timeline_parameters = 'bundle=true';
        var loading = false;
        var tl;
        var eventSource;
        var event_data;
        var tags;
        var minDate ;
        var maxDate ;
        var centreDate ;
        var internalScrubberMove = false;
        $(function() {

            var currentPlayer = $('#player1');
            var nextPlayer = $('#player2');

            var db_name = wikid.parseDBname(window.location);
            $(".spaceName").text(db_name);
			var db = new CouchDB(db_name);
            event_data = {
                events : [
                ]
            }

            $('#newButton').button({
                icons : {
                    primary: 'ui-icon-plusthick'
                }
            }).click(function() {
                 var start = tl.getBand(0).getCenterVisibleDate().getTime();
                 var tagDoc = {
                     mark : {
                         start : start,
                         length: 30
                     }
                 };
                editTag(tagDoc);
            });


            function togglePlay() {
                 if (currentPlayer.jPlayer('getData', 'diag.isPlaying')) {
                   currentPlayer.jPlayer("pause");
                   $('#playButton').button('option', 'label', 'play')
                   .button( "option", "icons", {primary:'ui-icon-play'} );
                   $('#playButton').data('myPause', true);
               } else {
                    var myPause = $('#playButton').data('myPause');
                    if (myPause) {

                        currentPlayer.jPlayer("play");
                    }
                   else {
                        centerMoved();
                    }
                   loading = true;
                   $('.waitIcon').show();
                   $('#playButton').button('option', 'label', 'pause')
                   .button( "option", "icons", {primary:'ui-icon-pause'} );
                   $('#playButton').data('myPause', false);
               }
            }


            $('#playButton').button().click(function() {
                togglePlay();
            });

            $('#datePicker').datepicker({
                showOn: "button",
                buttonImage:"images/calendar.gif",
                buttonImageOnly:true,
                showButtonPanel:true,
                numberOfMonths: 3,
                onSelect: function(dateText,inst){
                    tl.getBand(0).setCenterVisibleDate(new Date(dateText));
                }
            }).focus(function() {
                $('#ui-datepicker-div').css('z-index', '10100');
            });

            // center at today by default..user can pass in from the url too
            var initialDate = Date.parse('today');
            var requested = timeline.parseRequestedDate(window.location)
            
            if (requested) {

                initialDate = requested;
            }

            var utcOffset = initialDate.getUTCOffset();

            // hack attack. Not sure what timeline really wants?
            var timeZoneOffset = parseInt(utcOffset[0] + utcOffset[2]);


            eventSource = new Timeline.DefaultEventSource();
            var theme = Timeline.ClassicTheme.create();
            var bandInfos = [
                Timeline.createBandInfo({
                    eventSource:    eventSource,
                    width:          "59%",
                    intervalUnit:   Timeline.DateTime.MINUTE,
                    intervalPixels: 30,
                    theme: theme,
                    date : initialDate,
                    timeZone: timeZoneOffset
                }),
                Timeline.createBandInfo({
                    overview:       true,
                    eventSource:    eventSource,
                    width:          "6%",
                    intervalUnit:   Timeline.DateTime.HOUR,
                    intervalPixels: 200,
                    theme: theme,
                    date : initialDate,
                    timeZone: timeZoneOffset
                }),
                Timeline.createBandInfo({
                    overview:       true,
                    eventSource:    eventSource,
                    width:          "20%",
                    intervalUnit:   Timeline.DateTime.DAY,
                    intervalPixels: 400,
                    theme: theme,
                    date : initialDate,
                    timeZone: timeZoneOffset
                }),
                Timeline.createBandInfo({
                    overview:       true,
                    eventSource:    eventSource,
                    width:          "8%",
                    intervalUnit:   Timeline.DateTime.MONTH,
                    intervalPixels: 400,
                    theme: theme,
                    date : initialDate,
                    timeZone: timeZoneOffset
                }),
                Timeline.createBandInfo({
                    overview:       true,
                    eventSource:    eventSource,
                    width:          "8%",
                    intervalUnit:   Timeline.DateTime.YEAR,
                    intervalPixels: 500,
                    theme: theme,
                    date : initialDate,
                    timeZone: timeZoneOffset
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            bandInfos[2].syncWith = 0;
            bandInfos[2].highlight = true;
            bandInfos[3].syncWith = 0;
            bandInfos[3].highlight = true;
             bandInfos[4].syncWith = 0;
            bandInfos[4].highlight = true;
            tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);

            var currentRangeTimer;
            var centerRangeTimer;

            var recordings = [];
            function loadRecords() {
                //console.log('loading records');
                currentRangeTimer = null;
                recordings = [];
                clearTimeout(centerRangeTimer);
                centerRangeTimer = null;
                tl.showLoadingMessage();
                var results = db.view("audio/by_time", {startkey:  minDate.getTime(), endkey: maxDate.getTime()});
                var centerItem = null;
                tags = [];
                event_data.events = _.map(results.rows, function(item) {
                    if (item.value.type == 'recording') {
                        recordings.push(item);
                    }
                    if (item.value.type == 'recording' && item.value.start <= centreDate.getTime() && centreDate.getTime() <= item.value.end ) {
                        centerItem = item;
                    }
                    var base = {
                        eventID: item.id, 
                        start: new Date(item.value.start)
                    };
                    if (item.value.type == 'recording') {
                        base.end = new Date(item.value.end);
                        base.durationEvent = true;
                        base.title = "";
                        base.caption = "Recording";
                        base.trackNum = 1;
                    }
                    if (item.value.type == 'mark') {

                        base.durationEvent = false;
                        base.title = tagToTimelineMarkerTitle(item.value);
                        base.caption = "Liferecorder Mark";


                        tags.push(base);
                    }
                    return base;

                });
                eventSource.clear();
                eventSource.loadJSON(event_data, document.location.href);
                tl.hideLoadingMessage();

                playCenteredItem(centerItem);


            }

            function updateTagInEventSource(tag) {
                var newEvents= [];
                var found = false;
                 $.each(event_data.events, function(i, evt) {
                    
                    if (evt.eventID != tag._id) newEvents.push(evt);
                    else {
                        found = true;
                        var base = {
                            eventID: tag._id
                        };
                        if (tag.start) base.start = new Date(tag.start);
                        else {
                            base.start = new Date(tag.mark.start);
                        }
                        base.durationEvent = false;
                        base.title = tagToTimelineMarkerTitle(tag);
                        base.caption = "Liferecorder Mark";
                        newEvents.push(base);
                    }
                });
                if (!found) {

                    var base = {
                        eventID: tag._id
                    };
                    if (tag.start) base.start = new Date(tag.start);
                    else {
                        base.start = new Date(tag.mark.start);
                    }
                    base.durationEvent = false;
                    base.title = tagToTimelineMarkerTitle(tag);
                    base.caption = "Liferecorder Mark";
                    newEvents.push(base);
                
                }
                event_data.events = newEvents;
                eventSource.clear();
                eventSource.loadJSON(event_data, document.location.href);

            }

            function removeTagInEventSource(tag) {
                var newEvents= [];
                $.each(event_data.events, function(i, evt) {
                    if (evt.eventID != tag._id) newEvents.push(evt);
                });
                event_data.events = newEvents;
                eventSource.clear();
                eventSource.loadJSON(event_data, document.location.href);
            }

            function tagToTimelineMarkerTitle(tag) {
                var tagString = "Tag";
                if (tag.tags) {
                    tagString = _.reduce(tag.tags, function(memo, tag){return memo + ',' + tag}, '').substring(1);

                }
                var title = " [" + tagString +"]";
                if (tag.text) {
                    title = tag.text + " [" + tagString +"]";
                }
                return title;
            }


            function findNextToPlay(currentItem) {
                var nextOne = false;
                var nextItem = _.detect(recordings, function(item) {
                    if (currentItem == null) {
                        if (item.value.start <= centreDate.getTime() && centreDate.getTime() <= item.value.end) {
                            return true;
                        }
                    }
                    else {
                        if (nextOne) {
                            return true;
                        }
                        if (item.id == currentItem.id) {
                            nextOne = true;
                        }
                    }
                    return false;
                });
                if (nextItem)
                    return nextItem;
                else return null;
            }


            function queueItem(player, item) {

                var queuedNextItem = player.data('playing');
                if (queuedNextItem == item) return;
                var url = getRecordingUrl(item.value);
                //console.log('que item' + url);
                //console.log('on player:  ' + player.attr('id')) ;
                player.data('playing', item);
                player.jPlayer("volumeMin");
                player.jPlayer("setFile", url);
                player.jPlayer("load");
            }


            function centerMoved() {
                loading = true;
                $('.waitIcon').show();
                centerRangeTimer = null;
                var item = findNextToPlay(null);
                playCenteredItem(item);
            }

            function playCenteredItem(item, offset) {
                if (item && item.value ) {
                    var url = getRecordingUrl(item.value);
                    var prevItem =  currentPlayer.data('playing');
                    if (!prevItem || item.value._id != prevItem.value._id) {
                        queueItem(currentPlayer, item);
                        currentPlayer.jPlayer("volumeMax");
                        currentPlayer.jPlayer('play');

                    }

                    // check the offset
                    if (offset == null) {
                        offset = centreDate.getTime() - item.value.start;
                    }
                    currentPlayer.data('dragOffset', offset);
                    currentPlayer.jPlayer('playHeadTime', offset);
                    $('#playButton').button('option', 'label', 'pause')
                            .button( "option", "icons", {primary:'ui-icon-pause'} );

                    // preload the next item.
                    var nextItem = findNextToPlay(item);
                    var queuedNextItem = nextPlayer.data('playing');
                    if (nextItem && nextItem  != queuedNextItem) {
                        //console.log('delay');
                        _.delay(queueItem, 3000, nextPlayer, nextItem);
                    }
                } else {
                    loading = false;
                    $('.waitIcon').hide();
                    currentPlayer.jPlayer('stop');
                    currentPlayer.data('playing', null);
                    nextPlayer.jPlayer('stop');
                    nextPlayer.data('playing', null);
                    $('#playButton').button('option', 'label', 'play');
                }

                $('#dateTimeLabel').text(centreDate.toString("ddd, d MMM yyyy, h:mm:ss tt"));
            }

            function getRecordingUrl(item) {
                var mediaName = _.keys(item.file)[0]
                return '/' + db_name + '/' + item._id + '/' + mediaName ;
            }

            tl.getBand(3).addOnScrollListener(function(band) {
                if (internalScrubberMove) return;
                thisMinDate = tl.getBand(3).getMinDate();
                thisMaxDate = tl.getBand(3).getMaxDate();
                centreDate = tl.getBand(0).getCenterVisibleDate();

                if (!thisMinDate.equals(minDate) || !thisMaxDate.equals(maxDate)) {
                    minDate = thisMinDate;
                    maxDate = thisMaxDate;
                    if (currentRangeTimer) {
                        clearTimeout(currentRangeTimer);
                    }
                    currentRangeTimer = setTimeout(loadRecords, 300);
                }

                if (centerRangeTimer) {
                    clearTimeout(centerRangeTimer);
                }
                loading = true;
                $('.waitIcon').show();
                centerRangeTimer = setTimeout(centerMoved, 1000);
            });






            tl.showLoadingMessage();

            eventSource.loadJSON(event_data, document.location.href);

            // dismiss loading message
            tl.hideLoadingMessage();

            var resizeTimerID = null;

            function onResize() {
                if (resizeTimerID == null) {
                    resizeTimerID = window.setTimeout(function() {
                        resizeTimerID = null;
                        tl.layout();
                    }, 500);
                }
            }

            //onResize();
            //tick();
            $.jPlayer.timeFormat.showHour = true;


            // add a playhead
            var playhead = $('<div id="playhead"></div>'); 
            $('#my-timeline').append(playhead);
            var where = $('#my-timeline').width() / 2;
            playhead.css('margin-left', where + 'px');


            initPlayer(currentPlayer);
            initPlayer(nextPlayer);
            var iteration = 0;
            function initPlayer(player) {
                player.jPlayer({
                   swfPath: "scripts" ,
                    "warningAlerts" : true,
                    preload: "none",
                    customCssIds: false
                }).jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
                    if (loading) {
                        $('.waitIcon').show();
                    }
                    iteration++;
                    if (iteration % 10 == 0) {
                        //console.log('dealing with player: ' + player.attr('id'));
                        //console.log('src: ' + player.jPlayer('getData', 'diag.src'));
                        //console.log('src: ' + player.jPlayer('getData', 'diag.isPlaying'));
                        if (player != currentPlayer) return;
                        var item = player.data('playing');
                        if (!item) return;

                        var offset = player.data('dragOffset');

                        if (offset == null) {
                            offset = 0;
                        }
                        if ( playedTime >= offset && !currentRangeTimer && !centerRangeTimer) {
                            if (offset > 0) {
                                // time to store 0
                                player.data('dragOffset', 0);
                            }
                            var newDate = item.value.start + playedTime;
                            if (loading) {
                                loading = false;
                                $('.waitIcon').hide();
                            }
                            var playDate = new Date(newDate);
                            $('#dateTimeLabel').text(playDate.toString("ddd, d MMM yyyy, h:mm:ss tt"));
                            var dateTextURL = 'timeline.html?' + playDate.toString("d-MMM-yyyy_h:mm:ss_tt");
                            $('.currentTimeLink').attr('href', dateTextURL);

                            internalScrubberMove = true;
                            tl.getBand(0).setCenterVisibleDate(playDate);
                            internalScrubberMove = false;
                            //$('#datePicker').datepicker('setDate', newDate);
                        }
                    }
                }).jPlayer("onSoundComplete", function() {


                    var temp = currentPlayer;
                    currentPlayer = nextPlayer;
                    nextPlayer = temp;
                    currentPlayer.jPlayer('volumeMax');
                    currentPlayer.jPlayer('play');

                    // preload the next item.
                    var item = currentPlayer.data('playing');
                    var nextItem = findNextToPlay(item);
                    if (nextItem) {
                        _.delay(queueItem, 3000, nextPlayer, nextItem);

                    }
                });
            }





            minDate = tl.getBand(3).getMinDate();
            maxDate = tl.getBand(3).getMaxDate();
            centreDate = tl.getBand(0).getCenterVisibleDate();
            loadRecords();

            $('.timeline-copyright').remove();
            $('.logo').css('top', '-5px');


            Timeline._Band.prototype._onMouseDown = function(innerFrame,evt, target) {
                this.closeBubble();
                if (this.disableDrag == true) return;
                this._dragging = true;
                this._dragX = evt.clientX;
                this._dragY = evt.clientY;
            }


            Timeline._Band.prototype.shouldDisableDrag = function(drag) {
                this.disableDrag = drag;
            }
            
            var tagMenu = {};
            tagMenu.selected = null;
            tagMenu.menu = $('<div class="context-menu"><ul id="tagMenu" ></ul><div id="context-info"></div></div>').hide().appendTo('body');
            tagMenu.hide_menu = function() {
                $('.context-menu').hide();
            }
             $('<li class=""><a href="#">Play</a></li>')
                .appendTo('#tagMenu')
                .bind('click', function(e){
                    // do something
                    tl.getBand(0).setCenterVisibleDate(tagMenu.selected._start);
                    e.preventDefault();
                    tagMenu.hide_menu();
                });
            $('<li class=""><a href="#" class="bold">Edit</a></li>')
                .appendTo('#tagMenu')
                .bind('click', function(e){
                    // do something
                    editTag(current_tag_doc);
                    e.preventDefault();
                    tagMenu.hide_menu();
                });

            function editTag(tagDoc) {
                var existingTags = [];
                if(tagDoc.tags  ) {
                    existingTags = tagDoc.tags;
                }

                $("#tag_tags").empty().tagit({
                    existingTags : existingTags,
                    tagSource :  function(request, response) {
                        var term = request.term;
                        var matches = db.allDocs( {
                            startkey_docid: term,
                            endkey_docid: term + 'zzz',
                            limit: 30
                        });
                        response(_.map(matches.rows, function(row) { return  row.id }));
                    }
                });
                if (tagDoc.text) {
                    $('#tag_text').val(tagDoc.text);
                } else {
                    $('#tag_text').val('');
                }
                current_tag_doc = tagDoc;
                $('#edit-tag').dialog('open');
            }



            $('<li class=""><a href="#">Move/Resize</a></li>')
                .appendTo('#tagMenu')
                .bind('click', function(e){
                    // do something
                    var div = $(tl.getBand(0).createLayerDiv(4000));
                    //console.log(tagMenu.selected);
                    var startDate = new Date(current_tag_doc.mark.start);
                    var endDate   = new Date(current_tag_doc.mark.start + (current_tag_doc.mark.length * 1000));
                    var left = tl.getBand(0).dateToPixelOffset(startDate);
                    var end  = tl.getBand(0).dateToPixelOffset(endDate);

                    var width = end - left;
                    console.log('left: ' +left);
                    console.log('end: ' +end);
                    console.log('width: ' + width)
                    if (width <= 0) width = 8;


                    var okCancel = $('<div class="editComplete"><div class="editCompleteTitle">Move/Resize</div></div>');
                    var okButton = $('<button>OK</button>');
                    okCancel.append(okButton);
                    var cancelButton = $('<button>Cancel</button>');
                    okCancel.append(cancelButton);
                    $('body').append(okCancel);
                    function moveOkCancel () {
                        okCancel.position({
                            of: $('.resizer'),
                            my: 'right center',
                            at: 'left center',
                            offset: '-15 0'
                        });
                    }
                    var moveOkCancelTimer = setInterval(moveOkCancel,  300);

                    var resizer = $('<div class="resizer"></div>');
                    resizer.css({position: 'absolute', left: left, width: width + 'px', height: '100%' })
                    div.append(resizer);
                    resizer.resizable({
                        handles:'e,w',
                        resize: function() {
                            moveOkCancel();
                        }
                    }).draggable({
                        axis: "x",
                        containment: div,
                        drag: function() {
                            moveOkCancel();
                        },
                        stop: function() {
                            moveOkCancel();
                        }
                    })
                    $('.ui-resizable,.ui-resizable-handle').mousedown(function(){
                        tl.getBand(0).shouldDisableDrag(true);
                    }).mouseup(function(){
                        tl.getBand(0).shouldDisableDrag(false);
                    });


                    


                    function cleanUp () {
                        clearInterval(moveOkCancelTimer);
                        resizer.remove();
                        okCancel.remove();
                        div.parent().remove();
                        //tl.getBand(0).removeLayerDiv(div)
                    }

                    cancelButton.click(function() {
                        cleanUp();
                    });

                    okButton.click(function() {

                        var left = resizer.position().left;
                        var right = left + resizer.width();

                        var start = tl.getBand(0).pixelOffsetToDate(left);
                        var end  = tl.getBand(0).pixelOffsetToDate(right);

                        current_tag_doc.mark.start = start.getTime();
                        current_tag_doc.mark.length = (end - start) / 1000;
                        db.save(current_tag_doc);

                        updateTagInEventSource(current_tag_doc);


                        cleanUp();
                    })

                    moveOkCancel();


                    e.preventDefault();
                    tagMenu.hide_menu();
                });
            $('<li class=""><a href="#">Delete...</a></li>')
                .appendTo('#tagMenu')
                .bind('click', function(e){
                    // do something
                  $('#confirm-delete').dialog('open');
                    e.preventDefault();
                    tagMenu.hide_menu();
                });

            var showingMenu = false;
            $(window).click(function(e) {
                if (showingMenu) return;
                 // only dismiss if outside of current menu

                var menu_offset = tagMenu.menu.offset();
                menu_offset.left -= 16; // little bit of buffer
                menu_offset.top -= 24;  // little bit of buffer
                var height = tagMenu.menu.height();
                var width = tagMenu.menu.width();
                //tagMenu.menu
                var clickX = e.pageX;
                var clickY = e.pageY;

                var boxTopLeft = [menu_offset.left, menu_offset.top];
                var bottomRight = [menu_offset.left + width, menu_offset.top + height];

                if (boxTopLeft[0] <= clickX && clickX <= bottomRight[0] && boxTopLeft[1] <= clickY && clickY <= bottomRight[1]) return;
                
                 tagMenu.hide_menu(); //Hide the menus if visible
            });
            // disable normal right click.
            $('#my-timeline').bind('contextmenu',function(e){e.preventDefault()});
            Timeline.OriginalEventPainter.prototype._showBubble = function(x,y, evt) {
                //console.log('click ' + x + ' ' + y);
                //console.dir(evt);
                showingMenu = true;
                _.delay(function() {showingMenu = false;}, 400);
                tagMenu.hide_menu();
                tagMenu.menu.show()
                    .css({
                        position: 'absolute',
                        top: y + 8,
                        left: x,
                        zIndex: 1000
                    });
                tagMenu.selected = evt;
                _.delay(showTagDetails, 10, evt);
                //return false;
            }
            var current_tag_doc;
            function showTagDetails(evt) {
                var tagDoc = db.open(evt._eventID);
                current_tag_doc = tagDoc;
                var contextinfo = $('#context-info');
                contextinfo.empty();
                if (!tagDoc.tags) return;
                $.each(tagDoc.tags, function(i, tagName) {
                    console.log('tag: ' + tagName )
                   var link = wikid.getTagLinkJqNode(tagName);
                    contextinfo.append(link);
                });
            }



            $('#confirm-delete').dialog({
                autoOpen: false,
                resizable: false,
                height: 240,
                modal: true,
                buttons : {
                    "Delete Tag" : function() {
                        db.deleteDoc(current_tag_doc);
                        removeTagInEventSource(current_tag_doc);
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });
            $('#edit-tag').dialog({
                autoOpen: false,
                resizable: true,
                height: 240,
                width: 600,
                modal: false,
                buttons : {
                    "Save" : function() {
                        var tags = [];
                          $(".tagit-choice").each(function() {
                            tags.push($(this).children("input").val());
                          });
                        var text = $('#tag_text').val();
                        current_tag_doc.tags = tags;
                        current_tag_doc.text = text;
                        db.save(current_tag_doc);
                        updateTagInEventSource(current_tag_doc);
                        // update each of the timestamps of the tags
                        _.delay(function(tags) {
                            $.each(tags, function(i, tag) {
                                var doc = db.open(tag);
                                if (!doc) {
                                    doc = {};
                                    doc._id = tag;
                                };
                                var now = new Date();
					            doc["-lastmodified"] = iso8601(now);
                                db.save(doc);
                            });
                        },100, current_tag_doc.tags );


                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });
            shortcut.add('Space', function() {
               togglePlay();
            }, {disable_in_input: true});

        })




    </script>
    <script src="scripts/timeline_2.3.1/timeline_js/timeline-api.js" type="text/javascript"></script>
</head>
<body>
<div class="breadcrumbBar">
    <a href="myspaces.html">My Spaces</a> >> <a class="spaceName" href="index.html"></a> >> timeline
</div>
<div class="logo">
    <img  src="images/corner_logo.png" alt="Eckoit Logo" />
</div>

 <div id="controls" class="">
     <button id="playButton" title="Control Playback">Play</button>
     <button id="newButton" title="Create a new tag at the current time.">New Tag</button>
      <img src="images/spinner.gif" alt="" class="waitIcon">
 </div>



 <div id="player1" class="hiddenPlayer">
 </div>
  <div id="player2" class="hiddenPlayer">
 </div>



 <div class="clear"></div>

<div id="my-timeline" style="height: 300px; border: 1px solid #aaa"></div>
 <div id="calendar" class=" ui-corner-bottom">
     <span id="dateTimeLabel">Time</span>
     <input id="datePicker" type="text"  />


 </div>
<div>
      <a class="currentTimeLink" href="timeline.html?"><img src="images/link.gif" alt="Link to this time"/> Link to this Time</a>
 </div>


 <div id="edit-tag" title="Edit Tag">
     <b>Topics</b>
     <ul id="tag_tags"></ul>
     <b>Text</b>
     <textarea id="tag_text" rows="2" cols="2" ></textarea>
 </div>



 <div id="confirm-delete" title="Delete Tag">
     <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>This tag will be deleted, Are you sure?  </p>
 </div>


<noscript>
    This page uses Javascript to show you a Timeline. Please enable Javascript in your browser to see the full page.
    Thank you.
</noscript>
</body>
</html>